<template>
  <div :style="{'height': height+'px'} ">
    <quill-editor ref="editor" :value="value" :options="options"
      :style="{'height': (height - subHeight)+'px'} " @input='onChange'
      @click.native="handleEditAblequestion" />

    <Upload style="display:none" v-if='upload.api' :action="upload.api.reqUrl"
      :accept="upload.accept" ref="upload" :headers="upload.api.headers"
      :name='upload.api.data.fileName' :data="upload.api.data" :show-upload-list="false"
      :on-success='onUpload' :before-upload='onBeforeUpload' />

    <Spin fix v-show="loading">
      <Icon type="ios-loading" size=20 class="demo-spin-icon-load"></Icon>
      <div>上传中</div>
    </Spin>

  </div>
</template>

<script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.snow.css'
  import mgr from './mgr.js'
  import fileMgr from '@/biz/file'
  import dt from '@dt/dt'

  export default {
    components: {
      quillEditor
    },
    props: {
      value: String,
      height: {
        type: Number,
        default: 500
      },
      type: Number,
    },
    data() {
      let handles = {
        'video': () => {
          this.upload = {
            type: 'video',
            accept: 'video/*',
            api: fileMgr.unload()
          }
          this.$nextTick(() => {
            this.$refs.upload.handleClick()
          })
        },
        'image': () => {
          this.upload = {
            type: 'image',
            accept: 'image/png, image/jpeg, image/gif',
            api: fileMgr.unload()
          }
          this.$nextTick(() => {
            this.$refs.upload.handleClick()
          })
        }
      }
      return {
        editor: null,
        options: mgr.options(handles, this.type),
        upload: {},
        loading: false,
        qillInit: true,
        subHeight: 50
      }
    },
    mounted() {
      this.editor = this.$refs.editor.quill
      this.showTip()
      this.editor.root.addEventListener('paste', evt => {
        if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files
          .length) {
          evt.preventDefault();
          [].forEach.call(evt.clipboardData.files, file => {
            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
              return;
            }
            // this.uploadToServer(file, (res) => {
            //   var range = this.quill.getSelection();
            //   if (range) {
            //     //  在当前光标位置插入图片
            //     toolbar.quill.insertEmbed(range.index, 'image', this.$ajax.defaults
            //       .baseURL + res.file.path);
            //     //  将光标移动到图片后面
            //     toolbar.quill.setSelection(range.index + 1);
            //   }
            // });
          });
        }
      }, false);

      this.editor.enable(false)
      this.editor.blur()
      this.$nextTick(() => {
        this.subHeight = this.editor.container.offsetTop
        window.addEventListener('resize', () => {
          this.subHeight = this.editor.container.offsetTop
        }, false)
      })
    },
    methods: {
      handleEditAblequestion() {
        if (this.qillInit) {
          this.editor.enable(true)

          this.editor.focus()
          this.qillInit = false
        }
      },
      showTip() {
        this.$nextTick(() => {
          const toolBar = document.getElementsByClassName('ql-toolbar')[0]
          const btns = toolBar.querySelectorAll('button')
          const sels = toolBar.querySelectorAll('select')
          btns.forEach(function(item) {
            item.title = mgr.getTitleTip(item.className, item.value)
          })
          sels.forEach(function(item) {
            item.parentNode.title = mgr.getTitleTip(item.classList[0])
          })
        })
      },
      onChange(e) {
        this.$emit('input', e)
      },
      onUpload(e) {
        this.loading = false
        if (e.code == '200') {
          const range = this.editor.getSelection()
          const newRange = 0 + (range !== null ? range.index : 0)
          if (this.upload.type == 'image') {
            this.editor.insertEmbed(newRange, 'image', e.data.imageURL)
          } else if (this.upload.type == 'video') {
            this.editor.insertEmbed(newRange, 'video', {
              url: e.data.imageURL,
              controls: 'controls',
            })
          }
          this.editor.setSelection(1 + newRange)
        } else {
          dt.ui.Message.error(e.msg)
        }
      },
      onBeforeUpload(e) {
        this.loading = true
        this.upload.api.data.title = e.name
      }
    },
  }
</script>

<style lang="scss" scoped>
  :v-deep(.ql-picker) {
    line-height: normal;
  }
</style>